import React, { Component } from 'react'
import { Col, Row, Radio } from 'antd'
import { connect } from 'react-redux'
import StatusIconBox from './status-Icon-box'
import '../../../less/index.less'
import '../../../less/tutor/section-list.less'
import { withRouter } from 'react-router-dom'
import * as sectionActions from '../../../actions/assignment'
import { getStudent } from '../../../actions/user'
import UrlPattern from 'url-pattern'
import AssignmentType from '../../../constant/quiz-type-app-address'
import quizTypes from '../../../constant/quizType'
import { TwsSection } from 'tws-antd'
import sectionStatusColor from '../../../constant/section-status-color'
import { FormattedMessage } from 'react-intl'
import { getLangFromLocalStorage } from '../../../constant/lang-util'

class TutorSectionListPageBody extends Component {
    state = {
      student: [],
      currentAssignmentStatus: 'all'
    }

  componentDidMount () {
    const pattern = new UrlPattern('/program/:programId/student/:studentId')
    const urlParams = pattern.match(this.props.location.pathname) || {}
    this.props.getStudentTasks(urlParams.programId, urlParams.studentId)
    this.props.getStudent(urlParams.studentId, (student) => {
      this.setState({student})
    })
  }

  goAssignmentPage (task, assignment) {
    const pattern = new UrlPattern('/program/:programId/student/:studentId')
    const urlParams = pattern.match(this.props.location.pathname) || {}

    const addressSuffix = AssignmentType(assignment.type)
    const address = `/learn${addressSuffix}`
    const quizzes = assignment.selectedQuizzes
    return `${address}/tutor/program/${urlParams.programId}/task/${task.id}/student/${urlParams.studentId}/divider/assignment/${assignment.id}/quiz/${quizzes[quizzes.length - 1].quizId}`
  }

  getAssignmentList (assignmentsInfo, index) {
      console.log(assignmentsInfo)
    const {assignment, task, topic} = assignmentsInfo
    const quizType = quizTypes.find(item => item.type === assignment.type)
    const color = sectionStatusColor[assignment.status] || ''
    const lang = getLangFromLocalStorage()
    let assignmentQuizUrl = assignment.id ? this.goAssignmentPage(task, assignment) : ''

    return <div>
      <div key={index}>
        <Row>
          <Col span={5} />
          <Col className='gutter-row margin-b-3 remove-p-style' span={14}>
            {quizType
              ? <a href={assignmentQuizUrl} className='link-text'>
                <TwsSection color={color}
                  taskType={<FormattedMessage id={quizType.text || ''} />}
                  taskTitle={task[`title_${lang}`] || task.title}
                  sectionDescription={assignment[`title_${lang}`] || assignment.title}
                  topicTitle={topic[`title_${lang}`] || topic.title}
                />
              </a>
              : ''
            }
          </Col>
        </Row>
      </div>
    </div>
  }

  getCompleteName (user) {
    const name = user.name || ''
    const userName = user.userName || ''

    return `${name}(@${userName})`
  }
  filter = assignmentsInfo => {
    const {currentAssignmentStatus} = this.state
    if(currentAssignmentStatus === 'all') return assignmentsInfo

    return assignmentsInfo.filter(item=>item.assignment.status===currentAssignmentStatus)
  }
  render () {
    const assignmentsInfo = this.props.studentsStatus

    const {student,currentAssignmentStatus} = this.state

    return (<div>
      <StatusIconBox
        completeName={this.getCompleteName(student)}
      />
      <Radio.Group value={currentAssignmentStatus} onChange={e => this.setState({currentAssignmentStatus: e.target.value})}>
        <Radio value='all'>ALL</Radio>
        <Radio value='assessed'><FormattedMessage id='已评估' /></Radio>
        <Radio value='unAssessed'><FormattedMessage id='已完成' /></Radio>
        <Radio value='reviewing'><FormattedMessage id='评阅中' /></Radio>
        <Radio value='unfinished'><FormattedMessage id='未提交' /></Radio>
      </Radio.Group>
      <div className='margin-l-5 margin-r-5 margin-t-2'>
        <Row gutter={64}>
          {this.filter(assignmentsInfo).map((item, index) => this.getAssignmentList(item, index))}
        </Row>
      </div>
    </div>)
  }
}

const mapStateToProps = ({studentsAssignmentStatus, settings}) => ({
  studentsStatus: studentsAssignmentStatus.studentAssignmentInfo,
  settings
})

const mapDispatchToProps = dispatch => ({
  getStudentTasks: (programId, studentId) => { dispatch(sectionActions.getStudentTasksSection(programId, studentId)) },
  getStudent: (studentId, information) => { dispatch(getStudent(studentId, information)) }
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TutorSectionListPageBody))
